<template>
  <div>
    <div class="headr">
      <img src="../../assets/service.png" alt="" class="pic" />
    </div>
    <div class="servicelist">
        <div v-for="(item,index) in ServiceList" :key="index" class="serviceboxb">
            <div class="sertitle">{{item.title}}</div>
            <img :src="imgurl + item.image" alt="" class="pic">
            <div class="description">{{item.description}}</div>
        </div> 

    </div>


  </div>
</template>

<script>
export default {
    data(){
        return{
            ServiceList: [],
            imgurl: ''
        }
    },

    created(){
        this.getService()
        this.imgurl = this.Imgurl

    },
    methods: {
        // 获取服务流程
        async getService(){
            const { data: res } = await this.$axios.get("index/getServiceProcess");
            this.ServiceList = res.data
            console.log(this.ServiceList);

        }
    }
};
</script>

<style lang="scss">
.servicelist {
    margin: 3% auto ;
    width: 1104px;
    // height: 60%;
    // border: 1px solid #EFEFEF;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    .serviceboxb {
        width: 550px;
        height: 436px;
        border: 1px solid #EFEFEF;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        .sertitle {
            font-size: 22px;
            font-weight: bold;
            color: #333333;
        }
        .description {
            font-size: 16px;
            padding: 0 30px;
            text-indent: 2em;
        }
        .pic {
            width: 500px;
            height: 300px;
        }

    }
    
}
</style>
